<script>
export default {
  name: "floor",
  props: {
    floor: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    /* 跳转到商品列表的回调函数 */
    goProductList(item) {
      const query = item.navigator_url.split("?")[1].split("=")[1]
      // 携带参数跳转
      uni.navigateTo({
        url: `/subPackages/productList/productList?query=${query}`
      })
    }
  },
}
</script>

<template>
  <view class="floor">
    <view class="floorHeader">
      <image :src="floor.floor_title.image_src"></image>
    </view>
    <view class="floorBody">
      <view class="left" @click="goProductList(floor.product_list[0])">
        <image :src="floor.product_list[0].image_src"></image>
      </view>
      <view class="right">
        <image v-for="(item,index) in floor.product_list" :key="index" :src="item.image_src" v-show="index!==0" @click="goProductList(item)"></image>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.floor {
  width: 100%;
  margin-top: 20rpx;

  .floorHeader {
    display: flex;
    justify-content: start;

    image {
      width: 700rpx;
      height: 70rpx;
    }
  }

  .floorBody {
    width: 100%;
    height: 480rpx;
    display: flex;
    justify-content: space-between;

    .left {
      padding-left: 5rpx;

      image {
        width: 232rpx;
        height: 100%;
      }
    }

    .right {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;

      image {
        width: 240rpx;
        height: 232rpx;
      }
    }
  }
}
</style>
